<template>
  <div class="page">
    <div class="nav-wrapper">
      <h1 class="title">IFF管理后台</h1>
      <el-menu default-active="1" class="el-menu-vertical" theme="dark">
        <router-link :to="item.uri + '/' + item.id" v-for="(item, index) in nav" :key="index" v-if="item.child===''">
          <el-menu-item :index="(index+1).toString()"><i :class="item.icon" class="nav-icon"></i>{{item.title}}</el-menu-item>
        </router-link>
        <el-submenu :index="(index+1).toString()" v-for="(item, index) in nav" :key="index" v-if="item.child!==''">
          <template slot="title"><i :class="item.icon" class="nav-icon"></i>{{item.title}}</template>
          <router-link :to="child.uri + '/' + child.id" :key="cindex" v-for="(child,cindex) in item.child">
            <el-menu-item :index="(index+1).toString()+'-'+(cindex+1).toString()">{{child.title}}</el-menu-item>
          </router-link>
        </el-submenu>
      </el-menu>
    </div>
    <div class="page-wrapper">
      <div class="page-head">
        <!--面包屑导航-->
        <el-breadcrumb separator="/" class="breadcrumb">
          <el-breadcrumb-item to="/admin/index" v-if="index===0" :key="index" v-for="(item, index) in breadcrumb">{{item.name}}</el-breadcrumb-item>
          <el-breadcrumb-item v-if="index>0" :key="index" v-for="(item, index) in breadcrumb">{{item.name}}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="user-login">
          <img src="../img/photo.jpg">
          <span class="user-name" v-html="username"></span>
          <el-button @click="logout" class="loginout" size="small">退出</el-button>
        </div>
      </div>
      <div class="page-content">
        <!--<div v-if="isHome && teams!==''"  class="top-box" style="margin-bottom:10px;">
          <el-select v-model="team" @change="changeTeam" v-if="teams!==''&&teams[0].role==='0'">
            <el-option
              v-for="item in teams"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <el-select v-model="principal_id" @change="changnumber" v-if="teams!==''">
            <el-option
              v-for="item in numbers"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </div>-->
        <home v-if="isHome" ref="home" :tid="team" :pid="principal_id" style="margin-top:10px;"></home>
        <!--<cyclicity v-if="isHome" ref="cyclicity" :tid="team" :pid="principal_id"></cyclicity>-->
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<style>
  .nav-wrapper {
    width: 180px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
    overflow: hidden;
    transition: all .28s ease-out;
  }
  .nav-wrapper .el-menu-vertical {
    transition: all .28s ease-out;
    position: absolute;
    top: 50px;
    bottom: 0;
    left: 0;
    right: -17px;
    overflow-y: scroll;
  }
  .page-wrapper {
    min-height: 100%;
    margin-left: 180px;
  }
  .nav-icon {
    display: inline-block;
    margin-right: 5px;
  }
  .page-head {
    height: 50px;
    line-height: 50px;
    border-radius: 0px !important;
    background-color: #eef1f6
  }
  .page-head .breadcrumb{
    font-size: 14px;
    padding: 17px;
  }
  .nav-wrapper .title {
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: #fff;
    background: #367fa9;
    font-weight: 700;
    font-size: 20px;
  }
  .user-login {
    position: absolute;
    height: 50px;
    top: 0;
    right: 50px;
  }
  .user-login img {
    width: 28px;
    height: 28px;
    margin-top: 10px;
    border-radius: 50%;
  }
  .user-login .user-name {
    line-height: 50px;
    font-size: 15px;
    vertical-align: top;
    margin-left: 8px;
    color: #20a0ff;
  }
  .user-login .loginout {
    vertical-align: top;
    margin-top: 10px;
    margin-left: 6px;
  }
  .user-login .loginout:hover {
    color: rgba(111, 111, 111,1);
  }
</style>
<script>
import config from '../utils/config.js'
import axios from 'axios'
import crypt from '../utils/crypto-helper-pkcs7'
import home from '../components/home'
export default {
  data () {
    return {
      breadcrumb: [],
      username: '',
      nav: [],
      isHome: true,
      team: 0,
      teams: [],
      numbers: [],
      principal_id: null,
      isnid: false
    }
  },
  components: {
    home
  },
  created () {
    this.ishome()
    this.getnav()
    this.teamsession()
    this.username = window.sessionStorage.getItem('user')
    if (!this.username) {
      this.$router.push('/admin/login')
      return false
    }
    this.getBreadcrumb()
  },
  methods: {
    getBreadcrumb () {
      this.breadcrumb = this.$route.matched.filter(item => item.name)
    },
    logout () {
      this.$confirm('确认要退出登录吗？')
      .then(_ => {
        axios.get(config.domain + config.urls.logout)
        .then(res => {
          var data = res.data
          if (data.errcode === 200) {
            window.sessionStorage.clear()
            this.$router.push('/admin/login')
          }
        })
        .catch(error => {
          console.log(error)
        })
      })
      .catch(_ => {})
    },
    getnav () {
      var param = {
        match: ''
      }
      var paramjson = JSON.stringify(param)
      var params = crypt.encrypt(paramjson)
      axios.get(config.domain + config.urls.nav + '?param=' + params)
      .then(res => {
        var response = res.data
        if (response.errcode === 200) {
          this.nav = response.data
          var nav = JSON.stringify(this.nav)
          var params = crypt.encrypt(nav)
          window.sessionStorage.setItem('nav', params)
        } else if (response.errcode === 200103) {
          this.$confirm('登录过期，请重新登录')
          .then(_ => {
            window.sessionStorage.clear()
            this.$router.push('/admin/login')
          })
          .catch(_ => {})
        }
      })
      .catch(error => {
        console.log(error)
      })
    },
    ishome () {
      if (this.$route.path === '/admin/index') {
        this.isHome = true
      } else {
        this.isHome = false
      }
    },
    getteam () {
//      var param = {
//        match: ''
//      }
//      var paramjson = JSON.stringify(param)
//      var params = crypt.encrypt(paramjson)
//      axios.get(config.domain + config.urls.dOptions + '?param=' + params)
//      .then(res => {
//        var response = res.data
//        if (response.errcode === 200) {
//          var resdata = response.data
//          if (resdata.team) {
//            this.teams = resdata.team
//            this.numbers = this.teams[0].list
//            this.team = this.teams[0].id
//            this.principal_id = this.numbers[0].id
//            if (this.teams[0].role === '0') { // 如果是超管
//              this.team = this.teams[0].id
//            }
//          } else {
//            this.teams = ''
//          }
//          var paramjson = JSON.stringify(this.teams)
//          var paramteam = crypt.encrypt(paramjson)
//          window.sessionStorage.setItem('team', paramteam)
//        } else if (response.errcode === 200103) {
//          this.$confirm('登录过期，请重新登录')
//          .then(_ => {
//            window.sessionStorage.clear()
//            this.$router.push('/login')
//          })
//          .catch(_ => {})
//        }
//      })
//      .catch(error => {
//        console.log(error)
//      })
    },
    changeTeam (val) {
      this.teams.forEach((item) => {
        if (item.id === val) {
          this.numbers = item.list
          this.principal_id = this.numbers[0].id
        }
      })
    },
    changnumber (val) {
      this.$refs.home.getcount()
      this.$refs.cyclicity.getdietDay()
    },
    teamsession () {
      var isnid = window.sessionStorage.getItem('isNid')
      if (window.sessionStorage.getItem('team')) { // 是否缓存了team
        var teams = window.sessionStorage.getItem('team')
        var paramst = teams.replace(/ /g, '+')
        var paramstring = crypt.decrypt(paramst)
        this.teams = JSON.parse(paramstring)
        if (isnid === 'true') { // 判断是否需要度缓存中的营养师id
          var pid = window.sessionStorage.getItem('pid')
          if (this.teams === '') { // 营养师
            this.principal_id = null
          } else {
            if (this.teams[0].role === '0') { // 超级管理员
              var tid = window.sessionStorage.getItem('tid')
              this.team = parseInt(tid)
              this.teams.forEach((item) => {
                if (item.id === this.team) {
                  this.numbers = item.list
                  this.principal_id = parseInt(pid)
                }
              })
            } else if (this.teams[0].role === '1') { // 团队管理员
              this.numbers = this.teams[0].list
              this.principal_id = parseInt(pid)
            }
          }
        } else { // 不需要调用缓存，默认显示第一个团队，及该团队下第一个成员的信息
          if (this.teams === '') {
            this.principal_id = null
          } else {
            this.numbers = this.teams[0].list
            this.team = this.teams[0].id
            this.principal_id = this.numbers[0].id
          }
        }
      } else { // 如果没有缓存获取数据
        this.getteam()
      }
    }
  },
  watch: {
    $route (curVal, oldVal) {
      if (curVal.path === '/admin/index') {
        if (oldVal.path.includes('noreply') || oldVal.path.includes('noupload') || oldVal.path.includes('cyclist')) {
          window.sessionStorage.setItem('isNid', true)
        } else {
          window.sessionStorage.setItem('isNid', false)
        }
      } else {
        window.sessionStorage.setItem('isNid', false)
      }

      if (curVal.path.includes('forum/news_list')) {
        if (oldVal.path.includes('forum/editor')) {
          window.sessionStorage.setItem('newslist', true)
        } else {
          window.sessionStorage.setItem('newslist', false)
        }
      } else {
        window.sessionStorage.setItem('newslist', false)
      }
      this.ishome()
      this.getBreadcrumb()
      this.teamsession()
    }
  }
}
</script>
